<template>
    <div class="warp">
        <div class="top">
            <div class="title">
                <p>参评职称：<span>{{ titles[tableParams.typeStatus-1] }}</span></p>
                <p>类型：<span>{{ tableParams.lastCategory }}</span></p>
            </div>
            <div class="query-bar">
                <el-button @click="showPopover = true" type="primary" size="small" round>投票进度</el-button>
                <el-button size="small" @click="inits" round>刷新</el-button>
            </div>
        </div>
        <div class="minTitle">
            <div class="flag"></div>
            <div class="text">{{ titleText }}</div>
        </div>
        <div class="content-table">
            <el-table
                :data="tableData"
                border
                size="small"
                style="width: 100%"
                header-row-class-name="table-header"
                @selection-change="handleSelectionChange">
                <el-table-column
                    type="selection"
                    width="90"
                    align="center">
                </el-table-column>
                <el-table-column
                    label="姓名"
                    align="center">
                    <template slot-scope="scope">
                        <div class="name-pic" v-if="scope.row.next == 'true'" @click="toReviewResultsAgain">
<!--                            <img src="../../assets/reviews/name-pic.png"/>-->
                            <p>{{scope.row.name}}</p>
                            <img src="../../assets/reviews/icon_yulan.png"/>
                        </div>
                        <div v-else>{{scope.row.name}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="currentTitle"
                    label="现职称"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="participatingTitle"
                    label="参评职称"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="postType"
                    label="参评岗位"
                    align="center">
                </el-table-column>
                <el-table-column
                    prop="total"
                    label="得票"
                    align="center">
                </el-table-column>
            </el-table>
        </div>
        <div class="footer-bar">
            <el-button :disabled="isChecked" @click="reviewAgain" type="primary" size="small" round>进行再次评审</el-button>
        </div>
        <vote-progress v-if="showPopover" :tableParams="tableParams" :showPopover.sync="showPopover" ></vote-progress>
    </div>
</template>

<script>
import Qs from 'qs'
import { findResultList,findCfg ,intoAgain} from '@/service/api'
import voteProgress from "@/components/reviewsManage/voteProgress"
export default {
    name: "reviewResultsAgain",
    data() {
        return {
            tableData:[],
            isChecked:true,
            userIds:[],
            tableParams:{},
            titleText:'',
            titles:['续任正高','晋升正高','续任副高','晋升副高'],
            showPopover:false,
            roundsId:''
        }
    },
    created() {
        this.tableParams = this.$route.query;
        this.inits();
        let rounds = this.tableParams.rounds.split('-')
        this.titleText = `第${rounds[0]}轮第${rounds.length}次`;
        // this.loopIntoAgain(this.roundsId)
    },
    components:{
        voteProgress
    },
    methods:{
        inits() {
            findResultList(Qs.stringify(this.tableParams)).then(res => {  //筛选查询数据
                if (res.code == 200) {
                    console.log(res)
                    this.tableData = res.data;
                } else {
                    console.log(res)
                }
            });
        },
        loopIntoAgain(rounds) {
            let params = {
                typeStatus:3,
                rounds:rounds,
                userIds: '["B0noiqTh8nrVuz57dZDHn8uzMEB0i6Cm"]'
            }
            intoAgain(Qs.stringify(params)).then(res => {
                if (res.code == 200) {
                    this.$message({
                        message: '执行成功!',
                        type: 'success'
                    });
                    this.roundsId = this.roundsId+'-1';
                    this.loopIntoAgain(this.roundsId)
                } else {
                    console.log(res)
                }
            });
        },
        reviewAgain() { //进入二次评审
            let userIds = [],
                params = {},
                next = true;
            this.userIds.forEach(item=>{
                if(item.next == 'true'){
                    this.$message('已选人员已经进入再次评审中，请勿重复操作！');
                    next = false
                }
                userIds.push(item.id)
            })
            if(!next)
                return false;
            params.userIds = JSON.stringify(userIds);
            params.rounds = this.tableParams.rounds+'-1';
            params.typeStatus = this.tableParams.typeStatus;
            console.log(params)
            intoAgain(Qs.stringify(params)).then(res => {
                if (res.code == 200) {
                    this.$message({
                        message: '执行成功!',
                        type: 'success'
                    });
                    this.inits();
                } else {
                    console.log(res)
                }
            });
        },
        handleSelectionChange(e) {
            this.userIds = e;
            if(e.length>0){
                this.isChecked = false;
            }else {
                this.isChecked = true;
            }
        },
        toReviewResultsAgain() {
            let query = Object.assign({},this.tableParams)
            query.rounds = query.rounds+'-1'
            console.log(query)
            let routeData = this.$router.resolve({ path: '/reviewResultsAgain', query: query});
            window.open(routeData.href, '_blank');
        },
    }
}
</script>

<style scoped>
.warp {
    height: 100%;
    min-width: 800px;
    min-height: 520px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 9px 8px 2px rgba(43, 103, 254, 0.05);
    border-radius: 5px;
    overflow: hidden;
    padding: 30px 35px;
    box-sizing: border-box;
}
.top{
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.title{
    font-size: 15px;
    font-weight: 400;
    color: #343434;
    display: flex;
}
.title span{
    color: #31478F;
}
.title p:first-child{
    margin-right: 100px;
}
.minTitle{
    display: flex;
    flex-direction: row;
    align-items: center;
    background: #31478f0d;
    padding: 10px 0px;
    border-top: solid 1px #f3f3f3;
    position:relative;
}
.minTitle>.flag{
    width: 3px;
    background: #31478F;
    margin: auto 22px;
    height: 18px;
}
.minTitle>.text{
    color: #31478F;
    font-weight: bold;
    font-size: 17px;
}
.content-table{
    height: calc(100% - 180px);
    margin: 25px 0px;
    border-radius: 5px 5px 0px 0px;
    overflow: hidden;
}
.content-table >>> .table-header th {
    background: #E6EAEB !important;
    border: none;
}
.content-table >>> .table-header th div{
    font-weight:bold !important;
    color: #333;
}

.content-table >>> .table-header .el-checkbox {
    position: relative;
    width: 100%;
    display: block;
    margin-left: -18px;
}

.content-table >>> .table-header .el-checkbox:before {
    content: "全选";
    position: absolute;
    left: 50px;
    font-weight: bold !important;
    color: #333;
}
.footer-bar{
    display: flex;
    margin: 0 auto;
    justify-content: center;
}
.footer-bar > button{
    display: block;
    margin: 0 20px;
}
.name-pic{
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.name-pic img{
    display: block;
    width: 18px;
    margin-left: 10px;
}
.query-bar{
    margin-right: 1px;
}
.query-bar >>> .el-button {
    width: 80px;
    margin-right: 0px;
}
</style>
